<template>
	<view class="page">
		<view class="container">
			<view class="title">
				<text>{{ detailData.title || '各商品的发货时间' }}</text>
			</view>
			<view class="content" v-if="detailData.note">
				<rich-text :nodes="detailData.note"></rich-text>
			</view>
		</view>
	</view>
</template>

<script setup>
import { ref } from 'vue';
import { post } from '../../../common/api';
import { onLoad } from '@dcloudio/uni-app';

const id = ref(0);
const detailData = ref({});
const loading = ref(false);

// 获取详情数据
const getDetailData = async () => {
	if (!id.value) return;
	
	loading.value = true;
	try {
		const data = {
			model: 'article_view',
			filters: {
				id: id.value
			}
		};
		
		const res = await post('/data/selectOne', data);
		if (res.code === 200 && res.data) {
			detailData.value = res.data;
		}
	} catch (error) {
		console.error('获取详情数据失败:', error);
	} finally {
		loading.value = false;
	}
};

onLoad((options) => {
	// 直接从onLoad参数中获取id
	if (options && options.id) {
		id.value = parseInt(options.id);
		// 根据id加载详情数据
		getDetailData();
	}
});

</script>

<style>
.page {
	background-color: #ffffff;
	min-height: 100vh;
}

.container {
	padding: 30rpx;
}

.title {
	font-size: 36rpx;
	font-weight: bold;
	margin-bottom: 40rpx;
	text-align: center;
}

.content {
	padding: 20rpx 0;
}

/* 富文本样式 */
.content rich-text {
	line-height: 1.6;
	font-size: 28rpx;
	color: #333;
}

.section {
	margin-bottom: 40rpx;
}

.section-title {
	font-size: 32rpx;
	font-weight: bold;
	color: #333;
	margin-bottom: 20rpx;
	padding-bottom: 10rpx;
	border-bottom: 1rpx solid #f0f0f0;
}

.section-content {
	padding: 0 20rpx;
}

.product-item {
	display: flex;
	justify-content: space-between;
	padding: 20rpx 0;
	border-bottom: 1rpx dashed #f0f0f0;
}

.product-name {
	font-size: 28rpx;
	color: #333;
}

.delivery-time {
	font-size: 28rpx;
	color: #666;
}

.note {
	margin-top: 60rpx;
	background-color: #f9f9f9;
	padding: 20rpx;
	border-radius: 10rpx;
}

.note-title {
	display: flex;
	align-items: center;
	margin-bottom: 20rpx;
	font-size: 28rpx;
	font-weight: bold;
	color: #333;
}

.note-icon {
	width: 32rpx;
	height: 32rpx;
	margin-right: 10rpx;
}

.note-content {
	display: flex;
	flex-direction: column;
	gap: 10rpx;
	font-size: 24rpx;
	color: #666;
	line-height: 1.6;
}

.loading-state {
	display: flex;
	justify-content: center;
	align-items: center;
	height: 200rpx;
}

.loading-text {
	font-size: 28rpx;
	color: #666;
}

.empty-state {
	display: flex;
	justify-content: center;
	align-items: center;
	height: 200rpx;
}

.empty-text {
	font-size: 28rpx;
	color: #666;
}
</style> 